import styled from 'styled-components'

export const HeaderWrapper = styled.div `
 height: 75px;
 font-size: 14px;
 background-color: #242424;
 
 .content{
   height: 70px;
   display: flex;
   justify-content: space-between;
 }
 .divider{
   height: 5px;
   background-color: #c20c0c;
 }

`
export const HeaderLeft = styled.div `
  display: flex;
  justify-content: start;

  .logo{
    display: block;
    width: 177px;
    height: 69px;
    background-position: 0 0;
    text-indent: -9999px;
  }

  .select-list{
    display: flex;
    .select-item{
      position: relative;
      height: 70px;
      padding: 0 19px;
      line-height: 70px;

      a{
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #b8b8b8;
      }
      :last-of-type a{
         position: relative;
         ::after {
           content: '';
           display: block;
           width: 28px;
           height: 19px;
           position: absolute;
           top: 15px;
           right: -30px;
         background-color: #e60026;
         border-radius: 20px;
           /* background-image: url(${require("@/assets/img/sprite_01.png")});
           background-position:-190px 0; */
           
          }

       }

      &:hover a ,a.active{
        color:#ffff;
        background: #000;
        text-decoration: none;
      }

      .active .icon {
        display: inline-block;
        width: 12px;
        height: 7px;
        bottom: -1px;
        position: absolute;     
        left: 50%;
        transform: translate(-50%, 0);
        background-position: -226px 0;
      }
    }
    
   
  }
`

export const HeaderRight = styled.div `
  display: flex;
  justify-content: space-between;
  
 .search{
   width: 158px;
   height: 32px;
   margin-top: 19px;
   border-radius: 32px;
   
   input{
     &::placeholder{
       font-size: 12px;
       color: #9b9b9b;
     }
   }
 }

 .center{
   width: 92px;
   height: 32px;
   line-height: 32px;
   text-align: center;
   margin: 19px 0 0 12px;
   /* padding: 0 0 0 16px; */
   border: 1px solid #4f4f4f;
   color: #ccc;
   font-size: 12px;
   border-radius: 20px;
   cursor: pointer;

   &:hover {
     color: #ffff;
     border-color: #ffff;
   }
 }

.login{
  width: 50px;
  height: 45px;
  color:#cccc;
  font-size: 12px;
  margin: 27px 0 0 20px;
  cursor: pointer;
 
  &:hover{
    color: #dddd;
  }
}
`